<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-top-stats>
				<ul class="count-list">
					<li v-for="(item, index) in countList" :key="index">
						<div class="count-list__title">
							{{ item.label }}
							<div class="count-li__icon" v-if="item.tips">
								<el-tooltip effect="dark" :content="item.tips" placement="top">
									<i class="el-icon-info"></i>
								</el-tooltip>
							</div>
						</div>
						<div>{{ item.value || 0 }}</div>
					</li>
				</ul>
			</template>
			<template #slot-top-mask>
				<div class="mask"></div>
			</template>
			<template #slot-datepicker>
				<div class="Filter base-flex">
					<div
						class="top-btn"
						:class="TimeIndex == 1 ? 'active' : ''"
						@click="changeTime(1)"
					>
						今天
					</div>
					<div
						class="top-btn"
						:class="TimeIndex == 2 ? 'active' : ''"
						@click="changeTime(2)"
					>
						昨天
					</div>
					<div
						class="top-btn"
						:class="TimeIndex == 3 ? 'active' : ''"
						@click="changeTime(3)"
					>
						近7天
					</div>
					<div
						class="top-btn"
						:class="TimeIndex == 4 ? 'active' : ''"
						@click="changeTime(4)"
					>
						近30天
					</div>
					<div
						class="top-btn"
						:class="TimeIndex == 5 ? 'active' : ''"
						@click="changeTime(5)"
					>
						全部
					</div>
					<div style="margin-left:20px">
						<date-picker
							@change="
								val => crud.refresh({ startTime: val[0], endTime: val[1], page: 1 })
							"
							@refresh="crud.refresh({ startTime: '', endTime: '', page: 1 })"
						></date-picker>
					</div>
					<el-button
						@click="orderExport"
						type="primary"
						style="margin-left:10px"
						size="mini"
						v-permission="$service.crm.zfbStatisticsData.permission.orderExport"
					>
						<i class="el-icon-download"></i>导出报表
					</el-button>
					<div style="margin:0 20px">
						<el-select
							size="mini"
							filterable
							placeholder="选择页面"
							style="margin-right: 1em;width:140px;"
							v-model="pageType"
							@change="val => crud.refresh({ pageType: val, page: 1 })"
						>
							<el-option
								:value="item.value"
								:label="item.label"
								v-for="(item, index) in optionsPage"
								:key="index"
							></el-option>
						</el-select>
					</div>
				</div>
			</template>
			<template #table-column-pageType="{scope}">
				<div>{{ handlePage(scope.row.pageType) }}</div>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import DatePicker from '@/components/common/date-picker';
import goodInfo from './components/orderList/goods-info';
import moment from 'moment';
import { download } from '@/utils/index';
import store from '@/utils/store';
import { mapGetters } from 'vuex';

export default {
	data() {
		return {
			crud: null,
			countList: [
				{
					label: 'PV',
					value: '',
					tips: 'PV总和'
				},
				{
					label: 'UV',
					value: '',
					tips: '首页UV总和'
				},
				{
					label: '新增用户',
					value: '',
					tips: '授权用户的总和'
				},
				{
					label: '公告点击数',
					value: '',
					tips: ''
				}
			],
			TimeIndex: 1,
			pageType: '',
			onPagetype: '',
			isShowTips: false
		};
	},
	components: {
		DatePicker,
		goodInfo
	},
	computed: {
		...mapGetters(['platformVal']),
		optionsPage() {
			if (!this.platformVal) {
				if (
					store.get('platForm') == '5gqy' ||
					store.get('platForm') == 'zzqy_ydzq' ||
					store.get('platForm') == 'zzqy_hfcz' ||
					store.get('platForm') == 'zbqx' ||
					store.get('platForm') == 'ddyl' ||
					store.get('platForm') == 'jjxq' ||
					store.get('platForm') == 'xyqyzqdk' ||
					store.get('platForm') == 'qseyy' ||
					store.get('platForm') == 'zqdkhbxy' ||
					store.get('platForm') == 'bbkkl' ||
					store.get('platForm') == 'bbfxt' ||
					store.get('platForm') == 'bbz' ||
					store.get('platForm') == 'yqz'
				) {
					this.pageType = '4,5,6,7,8,13,14,15,16';
					this.crud.refresh({
						pageType: '4,5,6,7,8,13,14,15,16'
					});
					return [
						{ label: '全部', value: '4,5,6,7,8,13,14,15,16' },
						{ label: '首页', value: '4' },
						{ label: '百亿补贴', value: '5' },
						{ label: '个人中心', value: '6' },
						{ label: '签到', value: '7' },
						{ label: '账户明细', value: '8' },
						{ label: '步数抽奖', value: '13' },
						{ label: '步数打卡', value: '14' },
						{ label: '省钱攻略', value: '15' },
						{ label: '限时秒杀', value: '16' },
					];
				} else if (store.get('platForm') == 'tjt') {
					this.pageType = '101,102,103,104,105';
					this.crud.refresh({
						pageType: '101,102,103,104,105'
					});
					return [
						{ label: '全部', value: '101,102,103,104,105' },
						{ label: '首页', value: '101' },
						{ label: '畅销榜单', value: '102' },
						{ label: '淘宝省钱 ', value: '103' },
						{ label: '搜卷结果页', value: '104' },
						{ label: '我的 ', value: '105' }
					];
				} else {
					this.pageType = '1,2,9,11';
					this.crud.refresh({
						pageType: '1,2,9,11'
					});
					return [
						{ label: '全部', value: '1,2,9,11' },
						{ label: '首页', value: '1' },
						{ label: '百亿补贴', value: '2' },
						{ label: '卡包领取成功', value: '9' },
						{ label: '领取购物卡页面', value: '11' }
					];
				}
			} else {
				if (
					this.platformVal == '5gqy' ||
					this.platformVal == 'zzqy_ydzq' ||
					this.platformVal == 'zzqy_hfcz' ||
					this.platformVal == 'zbqx' ||
					this.platformVal == 'ddyl' ||
					this.platformVal == 'jjxq' ||
					this.platformVal == 'xyqyzqdk' ||
					this.platformVal == 'qseyy' ||
					this.platformVal == 'zqdkhbxy' ||
					this.platformVal == 'bbkkl' ||
					this.platformVal == 'bbfxt' ||
					this.platformVal == 'bbz' ||
					this.platformVal == 'yqz'
				) {
					this.pageType = '4,5,6,7,8,13,14,15,16';
					this.crud.refresh({
						pageType: '4,5,6,7,8,13,14,15,16'
					});
					return [
						{ label: '全部', value: '4,5,6,7,8,13,14,15,16' },
						{ label: '首页', value: '4' },
						{ label: '百亿补贴', value: '5' },
						{ label: '个人中心', value: '6' },
						{ label: '签到', value: '7' },
						{ label: '账户明细', value: '8' },
						{ label: '步数抽奖', value: '13' },
						{ label: '步数打卡', value: '14' },
						{ label: '省钱攻略', value: '15' },
						{ label: '限时秒杀', value: '16' },
					];
				} else if (store.get('platForm') == 'tjt') {
					this.pageType = '101,102,103,104,105';
					this.crud.refresh({
						pageType: '101,102,103,104,105'
					});
					return [
						{ label: '全部', value: '101,102,103,104,105' },
						{ label: '首页', value: '101' },
						{ label: '畅销榜单', value: '102' },
						{ label: '淘宝省钱 ', value: '103' },
						{ label: '搜卷结果页', value: '104' },
						{ label: '我的 ', value: '105' }
					];
				} else {
					this.pageType = '1,2,9,11';
					this.crud.refresh({
						pageType: '1,2,9,11'
					});
					return [
						{ label: '全部', value: '1,2,9,11' },
						{ label: '首页', value: '1' },
						{ label: '百亿补贴', value: '2' },
						{ label: '卡包领取成功', value: '9' },
						{ label: '领取购物卡页面', value: '11' }
					];
				}
			}
		}
	},

	mounted() {},
	methods: {
		orderExport() {
			this.$service.crm.zfbStatisticsData
				.orderExport({ ...this.params })
				.then(res => {
					download({
						data: res,
						fileName: `支付宝数据报表导出-${this.params.startTime}-${this.params.endTime}`
					});
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.crm.zfbStatisticsData)
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 80
						},
						{
							label: '日期',
							prop: 'date',
							align: 'center',
							sortable: true,
							formatter: row => {
								return moment(row.date * 1000).format('YYYY-MM-DD');
							}
						},
						{
							label: 'PV',
							prop: 'PV',
							align: 'center'
						},
						{
							label: 'UV',
							prop: 'UV',
							align: 'center'
						},
						{
							label: '页面',
							prop: 'pageType',
							align: 'center'
						}
					],
					op: {
						visible: false
					},
					props: {
						'default-sort': {
							prop: 'date',
							order: 'descending'
						}
					}
				})
				.set('dict', {
					api: {
						page: 'orderReport'
					}
				})
				.set('layout', [
					['slot-top-stats'],
					['slot-top-mask'],
					['refresh-btn', 'slot-datepicker', 'slot-statuspicker', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					this.params = params;
					if (params.isFree === ' ') {
						delete params.isFree;
					}
					if (params.isTLJ === ' ') {
						delete params.isTLJ;
					}

					const { subData } = await next(params);

					if (subData) {
						this.countList[0].value = subData.PV;
						this.countList[1].value = subData.UV;
						this.countList[2].value = subData.newUser;
						this.countList[3].value = subData.boardClickNum;
					}
				})
				.done();
			let params = {
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59'),
				pageType: this.pageType
			};

			app.refresh(params);
		},

		refresh(params) {
			this.crud.refresh(params);
		},

		changeTime(i) {
			var start = '';
			var end = '';
			this.TimeIndex = i;
			switch (i) {
				case 1:
					start = moment().format('YYYY-MM-DD 00:00:00');
					end = moment().format('YYYY-MM-DD 23:59:59');
					break;
				case 2:
					start = moment()
						.subtract(1, 'days')
						.format('YYYY-MM-DD 00:00:00');
					end = moment()
						.subtract(1, 'days')
						.format('YYYY-MM-DD 23:59:59');
					break;
				case 3:
					start = moment()
						.subtract(7, 'days')
						.format('YYYY-MM-DD 00:00:00');
					end = moment().format('YYYY-MM-DD 23:59:59');
					break;
				case 4:
					start = moment()
						.subtract(30, 'days')
						.format('YYYY-MM-DD 00:00:00');
					end = moment().format('YYYY-MM-DD 23:59:59');
					break;
				case 5:
					start = '';
					end = '';
					break;
			}
			this.refresh({
				startTime: start,
				endTime: end
			});
		},
		handlePage(val) {
			if (val) {
				let name = this.optionsPage.find(i => i.value == val);
				return name.label;
			} else {
				return '全部';
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.count-list {
	display: flex;
	align-items: center;
	padding-top: 10px;

	li {
		padding: 0 30px;
		list-style: none;
		color: #f1492a;

		div {
			font-size: 15px;
			margin: 10px 0;
			text-align: center;
		}
	}
	.count-list__title {
		position: relative;
		.count-li__icon {
			position: absolute;
			top: -10px;
			right: -19px;
			color: #909399;
		}
	}
}
.top-btn {
	display: inline-block;
	border: 1px solid #d9d9d9;
	border-radius: 4px;
	font-size: 14px;
	color: #595959;
	background: #ffffff;
	padding: 3px 25px;
	margin-left: 8px;
	cursor: pointer;
	&.active {
		border-color: #b3d8ff;
		color: #409eff;
	}
}
.mask {
	width: 100%;
	height: 10px;
	background: $bg-grey;
}
.Filter {
	margin-right: 10px;
	.title {
		margin-right: 10px;
		font-size: $font14;
		color: #666;
	}
}
.tips {
	color: #f14d27;
}
</style>

<style lang="stylus" scoped>
// 格式化crud
.cl-crud {
    padding: 0;

    >>>.el-row.el-row--2 {
        padding: 0 10px;
    }

    >>>.crud-data-table {
        padding: 0 10px;
    }

    >>>.el-row:last-child {
        padding: 0 10px;
    }
}
</style>
